<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .foot{
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        button{
            width: 50%;
        }
        .container{
            margin-top: 50%;
           text-align: center;
        }
        .msg{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
   <div class="my">我的
   </div>
   <div class="msg">消息</div>
    </div>
    <div class="foot">
        <button  class="odd" onclick="fun('user')">我的</button>
        <button class="add"  onclick="fun('msg')">消息</button>
        <!-- <button  class="odd" onclick="fun()">我的</button>
        <button class="add"  onclick="func()">消息</button> -->
    </div>
</div>
<div>
    <div id="child"></div>
</div>
<script>
 let child = document.getElementById('child');
 console.log(child.parentNode);//获取父元素

    let msg = document.getElementsByClassName('msg')[0];
    let my = document.getElementsByClassName('my')[0];
    // function fun(){
    //     console.log('==>',msg);
    //     msg.style.display = 'none';
    //     my.style.display = 'block';
    // }
    // fun()
    // function func(){
    //     console.log('==>',msg);
        // my.style.display = 'none';
        // msg.style.display = 'block';
    // }
    function fun(str){
        if(str === 'user'){
            msg.style.display = 'none';
            my.style.display = 'block';
        }else{
            my.style.display = 'none';
            msg.style.display = 'block';
        }
    }
</script>
</body>
</html>